<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script th:src="@{/ajax/libs/report/echarts/echarts.min.js}"></script>
    
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        option = {
        	    xAxis: {
        	        type: 'category',
        	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        	    },
        	    yAxis: {
        	        type: 'value'
        	    },
        	    series: [{
        	        data: [820, 932, 901, 934, 1290, 1330, 1320],
        	        type: 'line'
        	    }]
        	};

       
        var option = {
        	    title: {
        	        text: '动态数据',
        	        subtext: '纯属虚构'
        	    },
        	    tooltip: {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            label: {
        	                backgroundColor: '#283b56'
        	            }
        	        }
        	    },
        	    legend: {
        	        data:['最新成交价']
        	    },
        	    toolbox: {
        	        show: true,
        	        feature: {
        	            dataView: {readOnly: false},
        	            restore: {},
        	            saveAsImage: {}
        	        }
        	    },
        	    dataZoom: {
        	        show: false,
        	        start: 0,
        	        end: 100
        	    },
        	    xAxis: [

        	        {
        	            type: 'category',
        	            boundaryGap: true,
        	            data: (function (){
        	                 var res = [];
        	                 //res.push(1);
        	               // var len = 10;
        	               // while (len--) {
        	                //    res.push(10 - len - 1);
        	                //}
        	                 return res;
        	            })()
        	        }
        	    ],
        	    yAxis: [

        	        {
        	            type: 'value',
        	            scale: true,
        	            name: '预购量',
        	            max: 1200,
        	            min: 0
        	        }
        	    ],
        	    series: [
        	 
        	        {
        	            name: '最新成交价',
        	            type: 'line',
        	            data: (function (){
        	                 var res = [];
        	                 //res.push(100);
        	                // var len = 0;
        	               // while (len < 10) {
        	               //     res.push((Math.random()*10 + 5).toFixed(1) - 0);
        	               //     len++;
        	               // }
        	                 return res;
        	            })()
        	        }
        	    ]
        	};
        myChart.setOption(option);

        var count = 1;
        setInterval(function (){

            var data0 = option.series[0].data;
            //data0.shift();
            if(option.xAxis[0].data.length>10){
				//option.xAxis[0].data.shift();
				//data0.shift();
            }
            data0.push(Math.round(Math.random() * 1000));
			
            option.xAxis[0].data.push(count++);

            myChart.setOption(option);
        }, 500);

    </script>
</body>
</html>